<template>
  <div>
    <el-card>
      <!-- 输入题目名称 -->
      <el-form label-position="top" label-width="100px">
        <el-form-item label="输入题目名称">
          <el-input v-model="title" placeholder="请输入题目名称"></el-input>
        </el-form-item>

        <!-- 测试用例，按钮和输入框纵向排列 -->
        <el-form-item label="测试用例">
          <!-- 按钮容器，包含“添加一行”和“发送请求”按钮 -->
          <div class="button-container">
            <el-button type="primary" @click="addRow" class="add-button">添加一行</el-button>
            <el-button type="success" @click="sendPostRequest" class="send-button">发送请求</el-button>
          </div>

          <!-- 动态生成输入框 -->
          <div class="inputs-container">
            <div v-for="(input, index) in inputs" :key="index" class="dynamic-row">
              <!-- 序号显示，从1开始 -->
              <span class="input-number">{{ index + 1 }}.</span>
              <textarea
                  :id="`textarea-${index}`"
                  v-model="inputs[index]"
                  @input="adjustTextareaHeight(index)"
                  rows="1"
                  placeholder="请输入内容"
                  class="textarea-input"
              ></textarea>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import {API_BASE_URL} from '@/config.ts';

// 定义题目名称
const title = ref('');
const token = localStorage.getItem('token');
const isLoading = ref(false);

// 定义动态表单的输入项，默认5行
const inputs = ref(Array(5).fill(''));

// 添加一行输入
const addRow = () => {
  inputs.value.push('');
};

// 调整 textarea 高度
const adjustTextareaHeight = (index: number) => {
  nextTick(() => {
    const textarea = document.getElementById(`textarea-${index}`);
    if (textarea) {
      textarea.style.height = 'auto'; // 先重置高度以获取正确的scrollHeight
      textarea.style.height = textarea.scrollHeight + 'px'; // 根据内容设置高度
    }
  });
};

// 发送 POST 请求
const sendPostRequest = async () => {
  // 校验题目名称是否为空
  if (!title.value.trim()) {
    ElMessage.warning('题目名称不能为空');
    return; // 阻止请求发送
  }

  // 过滤掉空的输入项
  const filteredInputs = inputs.value.filter(input => input.trim() !== ''|| input.trim().length === 0|| input.trim()!==' ');

  // 如果过滤后的输入项为空，不发送请求
  if (filteredInputs.length === 0) {
    ElMessage.warning('请至少填写一个测试用例');
    return; // 阻止请求发送
  }

  // 检查 token 是否存在
  if (!token) {
    ElMessage.error('token 缺失，无法发送请求');
    return;
  }

  // 设置 loading 状态
  isLoading.value = true;

  try {
    const requestBody = {
      title: title.value,
      data: inputs.value
    };

    const response = await axios.post(`${API_BASE_URL}/onlineCode/generateTestGroup`, requestBody, {
      headers: {
        'Content-Type': 'application/json',
        'token': token
      },
      responseType: 'blob' // 如果后端返回文件，设置为 blob
    });

    console.log('请求成功:', response);

    const fileName = '[' + title.value + ']测试集.json';
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    ElMessage.error('请求失败，请重试');
    console.error('请求失败:', error);
  } finally {
    // 重置 loading 状态
    isLoading.value = false;
  }
};

// 在组件挂载时调整初始高度
onMounted(() => {
  inputs.value.forEach((_, index) => {
    adjustTextareaHeight(index);
  });
});
</script>

<style scoped>
.inputs-container {
  display: block; /* 确保容器是块级元素 */
  width: 100%; /* 确保容器宽度为100% */
}

.dynamic-row {
  display: block; /* 设置每行容器为块级元素，确保宽度为100% */
  margin-bottom: 10px;
}

.input-number {
  display: inline-block;
  width: 30px;
  margin-right: 10px;
}

.textarea-input {
  width: calc(100% - 40px); /* 使textarea宽度与容器宽度一致，减去序号宽度和间距 */
  resize: none; /* 禁止手动拉伸 */
  overflow: hidden; /* 防止滚动条 */
}

/* 按钮容器的样式，确保按钮水平排列 */
.button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.add-button, .send-button {
  margin-bottom: 10px;
}
</style>
